<template>
  <el-card>
    <div class="fixed_header">
      <el-row type="flex" justify="space-between" style="margin-bottom: 10px">
        <el-col>
          <el-button size="small" @click="handleBack">返回上一页</el-button>
          <span style="font-weight: bold; margin-left: 10px">{{ title }}</span>
        </el-col>
        <div>
          <el-button type="primary" size="mini" @click="handleSubmit"
            >提交</el-button
          >
        </div>
      </el-row>
    </div>
    <el-form
      :model="formModel"
      label-width="150px"
      :rules="rules"
      ref="form"
      class="form-container"
    >
      <el-card style="margin-bottom: 10px">
        <el-form-item label="用户类型">
          <el-button type="text">司机</el-button>
        </el-form-item>
        <el-form-item label="司机类型">
          <el-radio-group v-model="formModel.userProperty">
            <el-radio label="1">员工</el-radio>
            <el-radio label="2">非员工</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-card>
      <!-- 员工 -->
      <template>
        <el-card style="margin-bottom: 10px">
          <el-col :span="8">
            <el-form-item label="姓名" prop="principalName">
              <el-input
                v-model="formModel.principalName"
                placeholder="请输入"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="手机号" prop="principalPhone">
              <el-input
                v-model="formModel.principalPhone"
                placeholder="请输入手机号"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="身份证号" prop="idNumber">
              <el-input
                placeholder="请输入"
                v-model="formModel.idNumber"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="年龄" prop="age">
              <el-input placeholder="请输入" v-model="formModel.age"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="驾龄" prop="drivingYears">
              <el-input
                placeholder="请输入"
                v-model="formModel.drivingYears"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="驾照类型" prop="drivingLicenseType">
              <el-select
                style="width: 100%"
                v-model="formModel.drivingLicenseType"
              >
                <el-option
                  v-for="(item, idx) in drivingLicenseTypeList"
                  :key="item"
                  :value="idx + 1"
                  :label="item"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="驾照证照片" prop="drivingLicensePhoto">
              <file-upload
                :isShowTip="false"
                v-model="formModel.drivingLicensePhoto"
                :fileType="['png', 'jpg', 'jpeg']"
              ></file-upload>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="身份证照片" prop="idNumberPhoto">
              <file-upload
                :isShowTip="false"
                v-model="formModel.idNumberPhoto"
                :fileType="['png', 'jpg', 'jpeg']"
              ></file-upload>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="资格证照片" prop="certificationPhoto">
              <file-upload
                :isShowTip="false"
                v-model="formModel.certificationPhoto"
                :fileType="['png', 'jpg', 'jpeg']"
              ></file-upload>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="体检报告" prop="physicalExaminationFile">
              <file-upload
                :isShowTip="false"
                v-model="formModel.physicalExaminationFile"
                :fileType="['png', 'jpg', 'jpeg']"
              ></file-upload>
            </el-form-item>
          </el-col>
        </el-card>
        <el-card style="margin-bottom: 10px">
          <el-col :span="8">
            <el-form-item prop="userName">
              <template slot="label">
                账号
                <el-tooltip content="默认密码为123123">
                  <i class="el-icon-question"></i>
                </el-tooltip>
              </template>
              <el-input
                placeholder="请输入账号"
                v-model="formModel.userName"
              ></el-input>
            </el-form-item>
          </el-col>

          <el-col :span="8">
            <el-form-item label="账号状态">
              <el-switch
                v-model="formModel.status"
                active-value="0"
                inactive-value="1"
              ></el-switch>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item v-if="formModel.userProperty === '2'">
              <template slot="label">
                账号有效期
                <el-tooltip
                  content="用于限制“非员工”类型的司机登录小程序，到期后账号状态自动关闭，再次使用时，请打开状态开关，并重设有效期"
                >
                  <i class="el-icon-question"></i>
                </el-tooltip>
              </template>
              <el-date-picker
                type="date"
                placeholder="请填写账号"
                value-format="yyyy-MM-dd"
                v-model="formModel.expireTime"
              ></el-date-picker>
            </el-form-item>
          </el-col>
        </el-card>
      </template>
      <el-card>
        <el-form-item label="备注">
          <el-input
            type="textarea"
            placeholder="请输入备注"
            v-model="formModel.remark"
            :row="2"
            style="width: 600px"
          ></el-input>
        </el-form-item>
      </el-card>
      <el-card class="mt10" v-if="userId">
        <el-row>
          <el-col :span="8">
            <el-form-item label="司机ID">
              <span>{{ formModel.userInfoId }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="最后编辑时间">
              <span>{{ formModel.updateTime }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="创建时间">
              <span>{{ formModel.createTime }}</span>
            </el-form-item>
          </el-col>
        </el-row>
      </el-card>
    </el-form>
  </el-card>
</template>

<script>
import { userTypeList } from "@/configEnum";
import {
  listInfo,
  getInfo,
  delInfo,
  addInfo,
  updateInfo,
  checkPhone,
  checkIdNumber,
} from "@/api/system/info";
import { validateCard, validatePhoneNumber } from "@/utils/validator";
export default {
  data() {
    return {
      userTypeList,
      drivingLicenseTypeList: ["A1", "A2", "A3", "B1", "B2", "C1", "C2", "C3"],
      formModel: {
        userType: 2,
        userProperty: "1",
        principalName: undefined,
        principalPhone: undefined,
        idNumber: undefined,
        drivingYears: undefined,
        drivingLicenseType: undefined,
        status: "0",
        authSet: "1",
        drivingLicensePhoto: undefined,
        idNumberPhoto: undefined,
        physicalExaminationFile: undefined,
        certificationPhoto: undefined,
        userName: undefined,
        remark: undefined,
      },
      rules: {
        userName: [
          { required: true, message: "请输入", trigger: "blur,change" },
        ],
        principalName: [
          { required: true, message: "请输入", trigger: "blur,change" },
        ],
        principalPhone: validatePhoneNumber(),
        idNumber: validateCard(),
        drivingYears: [
          {
            required: true,
            trigger: "blur,change",
            validator: (rule, value, callback) => {
              if (parseFloat(value).toString() == "NaN") {
                callback("请输入数字");
              } else {
                callback();
              }
            },
          },
        ],
        drivingLicenseType: [
          { required: true, message: "请选择驾照类型", trigger: "blur,change" },
        ],
        age: [
          {
            required: true,
            trigger: "blur,change",
            validator: (rule, value, callback) => {
              if (parseFloat(value).toString() == "NaN") {
                callback("请输入数字");
              } else {
                callback();
              }
            },
          },
        ],
        drivingLicensePhoto: [
          { required: true, message: "请上传驾照证", trigger: "blur,change" },
        ],
        idNumberPhoto: [
          {
            required: true,
            message: "请上传身份证照片",
            trigger: "blur,change",
          },
        ],
        physicalExaminationFile: [
          {
            required: true,
            message: "请上传资格证照片",
            trigger: "blur,change",
          },
        ],
        certificationPhoto: [
          { required: true, message: "请上传体检报告", trigger: "blur,change" },
        ],
      },
    };
  },
  methods: {
    handleSubmit() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          checkPhone({
            principalPhone: this.formModel.principalPhone,
          }).then((res) => {
            if(res.data) return this.$message.error('手机号已存在！')
            checkIdNumber({
              idNumber: this.formModel.idNumber,
            }).then((res) => {
               if(res.data) return this.$message.error('身份证号已存在！')
              if (this.userId) {
                updateInfo({
                  ...this.formModel,
                  subjectName: this.formModel.principalName,
                }).then((res) => {
                  this.$message.success("更新成功");
                  this.$router.push("/logistics/driver");
                });
              } else {
                addInfo({
                  ...this.formModel,
                  subjectName: this.formModel.principalName,
                }).then((res) => {
                  this.$message.success("新增成功");
                  this.$router.push("/logistics/driver");
                });
              }
            });
          });
        } else {
          return false;
        }
      });
    },
    handleBack() {
      this.$router.push({
        path: "/logistics/driver",
      });
    },
    getUserInfo() {
      getInfo(this.userId).then((res) => {
        console.log(res);
        this.formModel = { ...this.formModel, ...res.data };
      });
    },
  },
  created() {
    this.userId = this.$route.query.id;
    if (this.userId) {
      this.getUserInfo();
    }
  },
  computed: {
    title() {
      return !this.$route?.query?.id ? "新增司机" : "修改司机";
    },
  },
};
</script>

<style lang="scss" scoped></style>
